import { useState } from "react";
import "./App.scss";

const App = () => {
  const [isTrue, setTrue] = useState(true);
  // 获取原本(类名)的dom元素 默认元素1
  const ball = document.getElementsByClassName("absolute");
  //获取新赋值class的dom元素(现在还没有) 元素2
  const ball2 = document.getElementsByClassName("ball");
  const click = () => {
    // 默认触发
    if (isTrue) {
      // 元素1改变为元素2 (主要是切换class属性)
      ball[0].className = "ball";
      setTimeout(function () {
        const _isTrue = isTrue;
        // 赋值,取反,下一次触发下一个
        setTrue(!_isTrue);
        console.log(isTrue);//false
        //定时触发(下面有个用isTrue做判断是否隐藏的)
      }, 2000);
      setTimeout(() => {
        // 两个元素 一个隐藏一个显示
        if (isTrue) {
          ball2[0].style.display = "none";
        } else {
          ball[0].style.display = "block";
        }
        // 时间以好看为主
      }, 3000);
    } else {
      // 重新赋值class名
      ball2[0].className = "absolute";
      // 做判断
      if (isTrue) {
        ball2[0].style.display = "none";
      } else {
        ball[0].style.display = "block";
      }
      const _isTrue = isTrue;
      setTrue(!_isTrue);
      // 再次取反
      console.log(isTrue);//true
    }
  };
  return (
    <div className="box">
      <div
        className="boox"
        style={isTrue ? { display: "block" } : { display: "none" }}
      >
        <div className="h2">登录</div>
        <div>
          <input type="text" name="name" placeholder="用户名" />
        </div>
        <div>
          <input type="text" name="mima" placeholder="密码" />
        </div>
        <div className="btn">
          <span>登录</span>
        </div>
        <div>
          <a href="###">
            <p>忘记密码</p>
          </a>
        </div>
      </div>
      <div className="absolute" onClick={click}>
        <h1>+</h1>
      </div>
      <div
        className="zhuce"
        style={!isTrue ? { display: "block" } : { display: "none" }}
      >
        <div>
          <div className="h2">
            <h1>注册</h1>
            <h1 className="x" onClick={click}>
              x
            </h1>
          </div>
          <div>
            <div>
              <input type="text" placeholder="账号" />
            </div>
            <div>
              <input type="text" placeholder="密码" />
            </div>
            <div>
              <input type="text" placeholder="确认密码" />
            </div>
            <div>
              <span>注册</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default App;
